<template>
	<view class="container">
		<!-- 零工列表name -->
		<view class="hg-30"></view>
		<view class="list">
			<!-- 雇员列表 -->
			<view class="employer-info" v-for="(item,index) in collectList" :key="index"
				@click="handleOpenPage(item.relationId)">
				<view v-if="isDelect" class="circle">
					<icon v-if="1" color="#F39B19" type="success" size="18" />
					<!-- 非选中显示 -->
					<icon v-if="1" type="circle" size="18"></icon>
				</view>
				<view class="top"
					:style="{background: item.user.user_job_status==1 ? '#FCC928' : item.user.user_job_status == 0 ? 'rgba(64,33,16,0.50)' : ''}">
					<text>{{ item.user.user_job_status == 0 ? '休息中' : item.user.user_job_status == 1 ? '工作中' : '接单中'}}</text>
				</view>
				<view class="left">
					<view class="avatar" :style="{top: item.user.vipFlag ? (15 +'rpx') : 0}"
						:class="{'vip-avatar':item.user.vipFlag==1}">
						<image :class="item.user.vipFlag==0?'avatar-pic':'avatar-pic-vip'"
							:src="imgPath + item.user.avatar" mode="aspectFill"></image>
						<view v-if="item.user.vipFlag" class="vip-crown">
							<image src="http://images.linglinggong.net/icon3/adasdasd.png" mode="aspectFill"></image>
							<text>金牌</text>
						</view>
					</view>
					<view>
						<view>
							<text>{{ item.user.userName }}</text>
							<view v-if="item.user.sex==0" class="sex-nan">
								<image class="sex-image" src="http://images.linglinggong.net/icon3/nna1111.png"
									mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
							<view v-if="item.user.sex==1" class="sex-nv">
								<image class="sex-image" src="http://images.linglinggong.net/icon3/nv111.png"
									mode="aspectFill"></image>
								{{!item.age ? '未知' : item.age}}
							</view>
						</view>
						<view class="cxDiv">
							<view class="cx">
								<text>评分</text>
								<text>{{ item.user.integrity/100 }}</text>
							</view>
							<text class="fg">|</text>
							<view class="cx">
								<text>好评率</text>
								<text>{{ item.haoping }}%</text>
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<text>成交单数</text>
					<text>{{ item.user.receiveNum }}</text>
				</view>
			</view>
		</view>
		<!-- 加载 -->
		<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"></uni-load-more>
		<!-- 底部控件 -->
		<view class="button-handle" v-if="isDelect">
			<view @click="handleSelectAll">
				<icon v-if="isSelectAll" color="#F39B19" type="success" size="18" />
				<!-- 非选中显示 -->
				<icon v-if="!isSelectAll" type="circle" size="18"></icon>
				<text>全选</text>
			</view>
			<view class="invitation-go" @click="handleInvite">立即邀请</view>
		</view>
	</view>
</template>
<script>
	import {
		he_evaluate_lv
	} from '@/libs/unit.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				isDelect: false, //是否删除
				hasFlag: true, // 是否还有更多数据要加载
				imgPath: '', //图片路径
				collectList: [], //我收藏的列表
				requestObj: { //
					pageNum: 0,
					pageSize: 20,
					type: 1, //0是雇主，1是雇员，2是工作
				},
			}
		},
		methods: {
			//打开雇员详情页
			handleOpenPage(id) {
				if (this.isDelect) return
				uni.navigateTo({
					url: '/pages/employer-detail/employee-detail?staffId=' + id
				})
			},
			// 获取收藏列表
			async get_collect_list() {
				if (!this.hasFlag) return // 说明已经没有更多啦

				++this.requestObj.pageNum
				let res = await this.$fetch(this.$api.get_collect_list, this.requestObj, 'POST')
				console.log('996', res)
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 整理数据,res.rows.   user为null，则改为""
				let haoping = uni.getStorageSync('heEvaluateLv') ? uni.getStorageSync('heEvaluateLv') : []
				res.rows.forEach(item => {
					Object.getOwnPropertyNames(item.user).forEach(key => {
						item.user[key] = item.user[key] == null ? '' : item.user[key]
					})
					if (haoping.indexOf(item.user.userId) != -1) {
						item.haoping = haoping[haoping.indexOf(item.user.userId) + 1]
					} else {
						he_evaluate_lv(item.user.userId).then((v) => {
							this.$set(item, 'haoping', v)
						})
					}
				})
				console.log('获取收藏列表res.rows', res.rows)
				// 拼接
				this.collectList = [...this.collectList, ...res.rows]
				this.hasFlag = this.collectList.length < res.total
			},
		},
		onShow() {
			this.imgPath = uni.getStorageSync('imgPath')
			this.get_collect_list()
		},
		onNavigationBarButtonTap() {
			this.isDelect = true
		},
		onReachBottom() {
			this.get_collect_list()
		},
		onShareAppMessage() {
			return {
				title: "足不出户，免费招工",
				desc: "线上招募零工，工价透明，免费使用",
				path: `/pages/start-n/start-n`,
				imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
				success: res => {}
			}
		},
	}
</script>
<style lang="less" scoped>
	.container {
		&>.list {
			&>.employer-info {
				background-color: #FFFFFF;
				position: relative;
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>.circle {}

				//横线
				&::before {
					content: "";
					position: absolute;
					bottom: 0rpx;
					width: 720rpx;
					height: 2rpx;
					background: #F2F2F2;
					border-radius: 1px;
				}

				&>.top {
					position: absolute;
					top: 0;
					right: 0;
					width: 104rpx;
					height: 50rpx;
					background: #4E9800;
					border-radius: 0 0 0 13px;
					display: flex;
					align-items: center;
					justify-content: center;

					&>text {
						font-size: 12px !important;
						color: #FFFFFF !important;
					}
				}

				&>.left {
					display: flex;

					&>.avatar {
						position: relative;
						margin-right: 30rpx;

						&>.avatar-pic {
							width: 108rpx;
							height: 108rpx;
							border-radius: 50%;
						}

						&>.crown {
							position: absolute;
							left: -10rpx;
							top: -40rpx;
							width: 78rpx;
							height: 59rpx;
						}
					}

					&>view {
						display: flex;
						flex-direction: column;

						&>view:first-child {
							// border: 1px solid #000000;
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;

							&>text {
								line-height: 48rpx;
								margin-right: 20rpx;
								height: 48rpx;
								font-size: 17px;
							}

							&>image {
								// align-self: flex-end;
								width: 26rpx;
								height: 26rpx;
							}
						}

						&>view:last-child {
							height: 40rpx;
							display: flex;
							align-items: center;

							text:first-child {
								// margin-right: 30rpx;
								color: rgba(64, 33, 16, 0.70);
							}

							text:last-child {
								font-weight: bold;
							}
						}
					}
				}

				&>.right {
					// border: 1px solid #000000;
					margin-bottom: -60rpx;
					text-align: right;
					display: flex;
					align-items: center;

					&>text:first-child {
						margin-bottom: 2rpx;
						margin-right: 30rpx;
						height: 34rpx;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.70);
					}

					&>text:last-child {
						height: 60rpx;
						font-weight: bold;
						font-size: 22px;
						color: #F39B19;
					}
				}
			}
		}

		.button-handle {
			display: flex;
			align-items: center;
			position: fixed;
			width: 100vw;
			height: 100rpx;
			background: #FFFFFF;
			bottom: 0;

			&>view:first-child {
				width: 192rpx;
				display: flex;
				align-items: center;
				height: 100rpx;

				icon {
					margin-left: 30rpx;
					margin-right: 20rpx;
				}
			}

			&>.invitation-go {
				background: #FCC928;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;

				&:active {
					opacity: 0.7;
				}
			}
		}
	}

	.fg {
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 49rpx;
		margin: 0 20rpx;
	}

	.cx {
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 49rpx;

		&>text:nth-last-child(1) {
			color: #FE4B28;
			margin-left: 8rpx;
		}
	}

	.cxDiv {
		display: flex;
		flex-direction: row;
	}

	.sex-nan {
		width: 73rpx;
		height: 32rpx;
		background: #1CAAEA;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-nv {
		width: 73rpx;
		height: 32rpx;
		background: #F90865;
		border-radius: 4rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.sex-image {
		width: 17rpx;
		height: 17rpx;
		margin-right: 9rpx;
	}

	.avatar-pic-vip {
		width: 105rpx;
		height: 105rpx;
		border-radius: 50%;
		border: 3rpx solid #FCC928;
	}

	.vip-avatar {
		width: 120rpx;
		height: 120rpx;
		align-items: center;
		background-image: url(http://images.linglinggong.net/icon3/7868789.png);
		background-size: cover;
	}

	.vip-crown {
		// width: 148rpx;
		padding: 0 10rpx;
		height: 32rpx;
		background: linear-gradient(0deg, #111832, #343B54);
		border-radius: 16rpx;
		position: absolute;
		top: 78rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		&>image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}

		&>text {
			font-size: 20rpx;
			font-weight: 500;
			color: #FCC928;
			line-height: 32rpx;
		}
	}
</style>